<nz-drawer [nzClosable]="true" [nzVisible]="visible"
           nzKeyboard="false" nzMaskClosable="false" nzPlacement="right"
           nzTitle="{{'common.code' | translate}}{{'common.snippet' | translate}}" nzWidth="60%"
           (nzOnClose)="handlerCancel()">
  <ng-container *nzDrawerContent>
    <nz-table #snippetTable [nzData]="columns" nzTableLayout="fixed">
      <thead>
      <tr>
        <th>{{'common.id'|translate}}</th>
        <th>{{'common.name'|translate}}</th>
        <th>{{'common.description'|translate}}</th>
        <th>{{'common.code'|translate}}</th>
        <th>{{'common.action'|translate}}</th>
      </tr>
      </thead>
      <tbody>
      <ng-container *ngFor="let data of snippetTable.data">
        <tr>
          <td>{{data.id}}</td>
          <td nzEllipsis>
            <span nz-tooltip nzTooltipPlacement="topLeft" nzTooltipTitle="{{data.name}}">{{data.name}}</span>
          </td>
          <td nzEllipsis>
            <span nz-tooltip nzTooltipPlacement="topLeft"
                  nzTooltipTitle="{{data.description}}">{{data.description}}</span>
          </td>
          <td [nzExpand]="toggledRows.has(data.id)" [nzShowExpand]="false">
            <nz-switch [ngModel]="false" nz-tooltip
                       nzTooltipTitle="{{'common.preview'|translate}}{{'common.ddl'|translate}}"
                       nzSize="small" nzCheckedChildren="{{'common.open'|translate}}"
                       nzUnCheckedChildren="{{'common.close'|translate}}"
                       (click)="handlerRowToggled($event, data.id)">
            </nz-switch>
          </td>
          <td>
            <button nz-button nz-tooltip nzTooltipTitle="{{'common.quote'|translate}}{{'common.ddl'|translate}}"
                    nzType="text" (click)="handlerRowSelectedQuote(data)">
              <i class="fa fa-reply"></i>
            </button>
          </td>
        </tr>
        <tr *ngIf="toggledRows.has(data.id)" [nzExpand]="toggledRows.has(data.id)">
          <div style="width: {{tableWidth}}">
            <ngx-codemirror [(ngModel)]="data.code" [options]="editorConfig"></ngx-codemirror>
          </div>
        </tr>
      </ng-container>
      </tbody>
    </nz-table>
  </ng-container>
</nz-drawer>
